<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作网页固定广告条</title>

  <style>
    .top
    {
      /*width: 100%;*/
      width: 100vw;
      height: 30px;
      position: fixed;
      top: 0;
      color: #fff;
      text-align: center;
      font-weight: bold;
      font-size: 30px;
      background-color: #5aa4ae;
    }

    .left,.right
    {
      position: fixed;
      width: 60px;
      height: 200px;
      top: 300px;
    }
    .left
    {
      left: 20px;
      background-color: yellow;
    }
    .right
    {
      background-color: red;
      right: 20px;
    }
    .main
    {
      margin-top: 130px;
    }

  </style>
</head>
<body>
  <div class="top">顶部广告条</div>
  <div class="left">左侧广告条</div>
  <div class="right">右侧广告条</div>
  <div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut autem dolores et iusto laudantium molestias
      voluptate voluptatem! Commodi cumque debitis delectus enim, itaque maiores minus nam odio perspiciatis ut.
    </div>
    <div>Ab asperiores atque beatae consequatur dignissimos dolorem ducimus eius, eligendi eum exercitationem fugiat
      laborum minima nobis nostrum optio possimus provident quam quas quasi quia quibusdam quis quod quos unde velit.
    </div>
    <div>Aliquam commodi ea eaque eligendi expedita ipsa ipsum, quasi ratione sequi? Delectus fugit modi officia
      officiis. Aliquid cupiditate fuga nobis non quis. Accusantium consequatur dicta doloremque explicabo maiores odit
      voluptatem?
    </div>
    <div>Cupiditate eius maiores molestias numquam perferendis! Assumenda, libero, reiciendis! Animi at consequuntur
      distinctio dolore, earum et eum harum, ipsa ipsum libero, neque nulla numquam obcaecati perspiciatis totam velit
      vero voluptatibus.
    </div>
    <div>Assumenda delectus dolor ducimus eligendi excepturi id in laboriosam necessitatibus nemo nesciunt pariatur
      praesentium quisquam, quod reprehenderit voluptatem. Ad culpa explicabo iusto modi quibusdam. Aspernatur iure
      laborum natus optio soluta.
    </div>
    <div>Adipisci beatae illo illum ipsa libero maxime nemo nihil nisi nobis, nostrum, numquam odio perspiciatis
      possimus quam quas quis repellendus similique unde veritatis, vitae? Eligendi eum facere porro tempora velit!
    </div>
    <div>A alias aperiam architecto culpa, cum delectus deleniti doloribus ducimus est, harum ipsa magnam maiores,
      maxime natus necessitatibus neque nisi non perferendis quas qui quibusdam repellendus repudiandae ullam voluptates
      voluptatibus?
    </div>
    <div>A alias asperiores aspernatur culpa doloribus eligendi, esse ex illum ipsum iusto laborum, maiores nostrum
      possimus quasi quibusdam quis, quo quos vel? Aut ex iste libero quibusdam, voluptate voluptatum. Illo.
    </div>
    <div>Ad alias cum delectus doloremque dolores doloribus id incidunt inventore ipsam ipsum, minima necessitatibus
      nihil nisi numquam placeat quae quasi quia quo quos recusandae repellat similique sit veniam veritatis
      voluptatibus.
    </div>
    <div>Aliquam architecto, at et excepturi nam nesciunt nobis optio, placeat possimus reprehenderit rerum similique
      voluptatem! Aliquid aperiam eius esse explicabo fugit impedit laboriosam numquam obcaecati officiis recusandae
      rerum, sequi voluptas!
    </div>
    <div>Dolor, molestias, quis! Beatae deserunt dolorem incidunt magni maxime ullam, unde vero. Asperiores dignissimos
      dolor earum, illo quia velit vitae. Esse, minus, ratione? Atque autem nobis perferendis quae quidem voluptas.
    </div>
    <div>Accusantium id perspiciatis soluta? Modi nemo non odit recusandae saepe. Ad assumenda dolore hic minus placeat
      voluptatem. Aspernatur at, blanditiis consequatur debitis dicta dolorum iusto natus officiis quod sed, sunt?
    </div>
    <div>A animi ipsum magni molestiae odit optio, quibusdam voluptates. At aut delectus doloribus est illo iure
      molestias neque quos sint! Eum explicabo laboriosam modi nulla quam rem repellat suscipit ut.
    </div>
    <div>Eius molestiae pariatur reprehenderit voluptate voluptates? Architecto blanditiis, temporibus. Ad, cupiditate
      dignissimos dolore doloremque dolorum eligendi exercitationem facere fuga, harum laborum, omnis quas quisquam
      ratione tempore tenetur velit voluptatem voluptates!
    </div>
    <div>Atque autem blanditiis commodi consequuntur dicta dolore dolorem ducimus, eos est et ex facere fuga hic itaque
      maiores nihil nisi obcaecati porro praesentium quas qui quis quod sint sunt voluptates!
    </div>
    <div>Accusamus cumque dolores eos illum inventore provident quasi repellat sapiente voluptates voluptatum. A
      aliquid, ducimus eligendi et fugit inventore itaque, minus numquam omnis, quisquam repellendus rerum tempore
      veritatis vero voluptates.
    </div>
    <div>Asperiores consectetur corporis, dolorum eligendi est ex facere magnam odit omnis tempore! Atque harum non quo
      saepe sunt voluptatibus. Ab aliquid amet atque dolorem magnam nostrum optio perspiciatis soluta totam?
    </div>
    <div>A aspernatur blanditiis commodi dolore doloremque eaque id illum, labore necessitatibus nostrum nulla obcaecati
      provident quisquam sequi similique soluta ut vel, veniam vero voluptatum. Accusamus ad nesciunt quam saepe veniam!
    </div>
    <div>A ad aliquam amet architecto asperiores atque beatae dolorem doloremque esse hic minus pariatur qui, quia quo
      recusandae repellat sed soluta temporibus veniam voluptates. Accusamus aliquid dignissimos iusto porro unde.
    </div>
    <div>Aperiam assumenda atque cum deleniti dolor eaque, impedit magni, officia pariatur placeat quia quo soluta sunt
      temporibus unde ut vel? At dolorum, id illum placeat quidem saepe. Architecto, quo, rerum.
    </div>
    <div>Aperiam beatae distinctio illum nisi quibusdam rem! Asperiores aspernatur beatae consectetur consequuntur
      doloribus ea eius ex exercitationem id in magnam magni, mollitia numquam odit provident quasi sapiente tenetur,
      vitae, voluptate!
    </div>
    <div>Commodi culpa eaque ex exercitationem explicabo ipsum minima qui sit? Aperiam architecto beatae doloremque ipsa
      mollitia neque possimus quo, rerum voluptatibus. A, laborum saepe? Dicta dolor illum libero nostrum suscipit?
    </div>
    <div>Error iusto nihil nulla. Dolor ducimus ea impedit possimus quas qui quos repudiandae tenetur. At cum
      dignissimos ducimus eius facere iusto labore maxime non, perspiciatis possimus quasi quisquam sit totam.
    </div>
    <div>Cumque dignissimos excepturi, fugit harum iure odit perspiciatis. Aliquam consequuntur cum debitis delectus
      fuga, ipsum iste molestiae natus necessitatibus officiis optio praesentium quo repellat similique sint sunt ullam.
      Ab, unde?
    </div>
    <div>Amet ea nulla quas ratione voluptatum! Accusamus, accusantium architecto aspernatur assumenda beatae culpa
      error et exercitationem fuga impedit, incidunt itaque minima minus nisi quos similique sint velit! Officia,
      repellat, unde?
    </div>
    <div>Ab consectetur ex harum obcaecati perferendis possimus, quas totam. Commodi corporis magni non quas sit velit!
      Doloremque eveniet hic nemo, nihil quisquam velit veritatis voluptatem. Aspernatur excepturi nisi saepe vel?
    </div>
    <div>Accusamus adipisci deserunt distinctio ipsum magni nesciunt quae ullam unde, vero voluptas? Ad at beatae,
      consectetur culpa deleniti eaque esse fugiat minus nam quasi quos repellat sequi tempora temporibus voluptatibus.
    </div>
    <div>Amet dolorem non nulla, numquam provident rem sapiente ut vel voluptas. A beatae commodi dicta eaque, inventore
      maiores maxime minus necessitatibus optio, ratione, repellendus reprehenderit saepe sequi similique suscipit
      voluptatum.
    </div>
    <div>Accusantium adipisci amet, assumenda incidunt minima nostrum perferendis porro ratione rem velit! Accusamus
      aliquam amet aspernatur at cum dolorum eum, ex, explicabo impedit iure laudantium maxime natus sapiente totam
      voluptatum.
    </div>
    <div>Earum illum magnam necessitatibus tempore! Architecto facere hic incidunt inventore laboriosam laborum minus
      molestiae necessitatibus numquam odio pariatur, perspiciatis praesentium quam qui reiciendis repellendus sed
      suscipit! Esse incidunt molestiae quis.
    </div>
    <div>Aperiam cum ea eos fuga in ipsum itaque iure laborum, libero maxime minus nam nobis, obcaecati quae quaerat qui
      quidem similique suscipit unde voluptate. Autem consectetur dolorum eligendi facere reiciendis.
    </div>
    <div>Dicta earum et in itaque perferendis recusandae suscipit. A ad alias cum debitis dolorum ducimus fuga,
      inventore, laboriosam nemo, non nostrum perferendis quam quis similique suscipit temporibus voluptatibus? Rerum,
      unde?
    </div>
    <div>Deleniti dolor facere incidunt quos? Alias blanditiis delectus eaque molestiae nemo quia reiciendis. Ab ad
      asperiores aut dicta dolor eaque eligendi, excepturi ipsa nostrum, odit quidem sequi sit ullam, ut.
    </div>
    <div>Ad asperiores aspernatur assumenda atque commodi corporis dolorem earum eveniet facere fuga hic in ipsam iure
      libero necessitatibus, nemo nisi nostrum numquam perferendis placeat porro praesentium quasi qui sapiente unde.
    </div>
    <div>Accusantium amet eos eum excepturi exercitationem illo, ipsum odio porro quos sint. Aliquid asperiores aut
      blanditiis cumque, delectus dicta eligendi, eveniet expedita minus officia porro quas sequi temporibus, vel velit?
    </div>
    <div>Alias, beatae distinctio id ipsum minima minus nisi non obcaecati quibusdam rerum vel voluptas voluptate?
      Aspernatur, at autem dolore, dolores excepturi fuga iste magnam minima molestiae obcaecati, quasi quos veritatis?
    </div>
    <div>Ad aliquam aperiam blanditiis corporis deleniti dolorem dolorum eligendi exercitationem expedita hic illo ipsa
      iste nesciunt non nulla pariatur quaerat quia rem repudiandae similique sit, suscipit vel vero voluptas
      voluptatem.
    </div>
    <div>Accusantium alias asperiores commodi cupiditate ducimus, error ex, id minus neque nobis nulla odit qui rem
      repellat reprehenderit sint soluta sunt ut. Commodi magni mollitia quia vel. Incidunt omnis, vitae?
    </div>
    <div>Ab adipisci asperiores eaque esse impedit ipsum iusto laudantium, magnam maxime minus modi nam natus quaerat
      recusandae sapiente similique unde. Accusantium consequatur, dolorem dolores expedita laudantium maiores possimus
      quia voluptates.
    </div>
    <div>Aliquid, at atque blanditiis commodi consequatur culpa delectus, eaque eius fuga molestiae molestias
      necessitatibus nihil non officia perspiciatis reiciendis sapiente vel, veritatis? Architecto eaque error et
      expedita fugiat inventore repudiandae?
    </div>
    <div>Ad assumenda autem corporis nobis officia perspiciatis quis! Ab ad adipisci distinctio dolores eaque eos esse
      est fugit illum impedit itaque magni nam nulla perferendis quam quasi ratione vitae, voluptates.
    </div>
    <div>Ad deleniti earum facilis magnam nisi non quas quisquam saepe vel veniam. Aliquam dolorum ducimus earum et eum,
      fugiat fugit illo impedit ipsam labore, molestias nemo placeat sint totam voluptate!
    </div>
    <div>Adipisci asperiores commodi, cupiditate deserunt doloribus expedita hic iusto libero modi omnis quas quo
      ratione rem saepe, sapiente tempora velit voluptate. Cupiditate distinctio earum est id ipsa, pariatur quidem
      temporibus.
    </div>
    <div>Animi architecto aut blanditiis consectetur, deleniti distinctio eius eum explicabo hic inventore, ipsam
      laboriosam libero natus nemo omnis perspiciatis tempora totam ullam velit voluptatem? Culpa ex maxime minima
      nesciunt velit.
    </div>
    <div>Dignissimos dolore excepturi impedit natus veritatis? Ab aliquid assumenda at autem blanditiis consectetur
      consequatur, dolorem illum inventore laborum laudantium molestias non possimus quos soluta ullam voluptatem. Culpa
      earum molestias vitae.
    </div>
    <div>Ab architecto asperiores at autem consequuntur delectus, dicta ducimus est eveniet ex expedita fugiat inventore
      ipsum iste iure iusto laborum maxime minima mollitia nobis praesentium, quae quia quibusdam reprehenderit,
      tempore?
    </div>
    <div>Aliquid architecto asperiores autem cupiditate dignissimos dolores earum et molestiae mollitia optio pariatur,
      praesentium quam quasi rerum soluta, suscipit temporibus. Aspernatur assumenda est harum maxime necessitatibus non
      possimus quod rem.
    </div>
    <div>Ab ad delectus dolorum ducimus error est exercitationem facere fugiat fugit hic in iste itaque iure libero
      minus molestiae mollitia officia quaerat quo ratione rerum saepe similique temporibus tenetur, ullam.
    </div>
    <div>Ad alias eos magnam molestias provident! Neque sequi suscipit ullam vitae voluptate. Alias aliquam aliquid at,
      atque beatae consequuntur corporis cupiditate doloribus ea est impedit incidunt iste neque vitae voluptates?
    </div>
    <div>A asperiores culpa ea eligendi, eum eveniet fuga hic laboriosam molestias nam nostrum quasi saepe vitae! Ab,
      commodi consequatur dolore dolorum, facilis, natus odit quaerat repellendus repudiandae sequi sint vitae!
    </div>
    <div>Ab aliquam asperiores at delectus dicta dolore exercitationem id, in laudantium natus nemo neque nisi optio
      placeat possimus praesentium quibusdam, quidem quos recusandae soluta ut velit veniam. Harum, velit voluptates.
    </div>
    <div>Amet cumque, fuga nobis provident quae reprehenderit voluptate voluptatibus? Cum expedita labore molestias
      necessitatibus nemo. Nostrum obcaecati omnis praesentium quas ut. Ab aliquam aspernatur error est facilis iure
      maxime, sunt.
    </div>
    <div>Ab ad alias cupiditate eaque exercitationem expedita, fuga illo iste nemo possimus quasi suscipit voluptates
      voluptatum! Dolores ea eligendi error expedita fuga, id iure maiores numquam perspiciatis quas, ratione
      voluptatibus?
    </div>
    <div>Aliquid architecto corporis eum expedita fugiat harum illo impedit itaque iure maxime nisi nobis nulla odio
      officia quam quis reiciendis repellendus saepe sapiente sint soluta sunt temporibus unde veritatis, vero?
    </div>
    <div>Aperiam, architecto beatae dolores et fugiat mollitia neque nisi repellat sapiente? Aut corporis doloremque
      doloribus ducimus earum et minima minus necessitatibus porro possimus, repudiandae rerum sed sunt tempora vero?
      Veniam.
    </div>
    <div>Accusantium atque beatae, commodi cumque cupiditate ducimus error eum excepturi iste magni molestiae
      necessitatibus nihil nisi nobis non, odio quae quam quasi quo reiciendis rem sed sint soluta totam, vel.
    </div>
    <div>Ab beatae consectetur, consequuntur deleniti ea, eius hic minus mollitia odio provident saepe sunt velit,
      voluptas. Aperiam asperiores beatae delectus enim in itaque minus, possimus provident repellat voluptas! Quam,
      voluptatibus.
    </div>
    <div>Aperiam doloribus eos ex maiores non nostrum saepe voluptate. A ab aliquid aspernatur at culpa doloremque eum
      exercitationem explicabo impedit incidunt laudantium magni maiores obcaecati, perferendis quas tempore tenetur
      voluptate.
    </div>
    <div>Adipisci aperiam asperiores aut consequuntur cumque dolores doloribus dolorum enim expedita illo in ipsum
      minima minus modi nemo, officiis perspiciatis quaerat rem repellat similique, sunt suscipit velit veritatis.
      Culpa, nulla.
    </div>
    <div>Aperiam aspernatur, consequuntur dolores eius error eum hic id illo incidunt ipsa ipsam, iure nesciunt nihil
      nisi nostrum perferendis, provident quos repellat similique voluptatibus? Amet corporis exercitationem id iure
      tempore!
    </div>
  </div>

</body>
</html>